<template>
  <div class="wrapper">
    <input type="text" v-model="msg1">
    <input type="text" v-model="msg2">
    <button @click="stopWatch">停止侦听</button>
    <input type="text" id="ipt">
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue';
/**
 * watch和watchEffect的区别：
 * 1.watchEffect会立即执行一次，watch除非开启immediate: true才会立即执行一次
 * 2.
 */

const msg1 = ref<string>('张三');
const msg2 = ref<string>('李四');
const stop = watchEffect((invalidate) => {
  // let ipt: HTMLInputElement = document.querySelector('#ipt') as HTMLInputElement;
  console.log('msg1', msg1.value);
  console.log('msg2', msg2.value);
  // console.log('ipt', ipt); // 初次进来是null, 设置flush: 'post'可以在组件更新后就立即执行
  invalidate(() => {
    console.log('最早执行'); // 会在最前面执行
  })
}, {
  flush: 'post', // 组件更新后立即执行
  onTrigger() { // 提供调试功能
    debugger;
  }
})

// watchEffect的第一个参数可以实现停止侦听的功能
const stopWatch = () => stop();
</script>

<style scoped>

</style>